<template>
  <div class="article_box">
      <ul>
        <li @click="gg">公告</li>
        <li @click="jx">简讯</li>
        <li @click="hy">会议</li>
        <li @click="bs">比赛</li>
      </ul>
      <input type="button" value="发布" class="input" @click="toWrite">
    <ul class="content">
      <li v-for="items of $store.state.adminGg.result" :key="items.id">
        <span>{{items.title}}</span>
        <span>{{items.createTime}}</span>
        <input type="button" value="编辑" @click="bianji" :id="items.id">
        <input type="button" value="删除" @click="drop" :id="items.id">
      </li>
    </ul>
    <gg-page :tag="tag"></gg-page>
  </div>
</template>

<script>
import { gg, dropNto } from 'com/shuju'
import GgPage from './components/ggPage'
export default {
  name: 'AdminGg',
  components: {
    GgPage
  },
  data () {
    return {
      tag: ''
    }
  },
  methods: {
    toWrite () {
      this.$router.push('/adminuser/writegg')
    },
    bianji () { // 编辑
      var tf = confirm('是否编辑？')
      if (tf) {
        var id = event.target.getAttribute('id')
        this.$router.push({
          name: 'WriteGg',
          params: {
            id
          }
        })
      }
    },
    drop () { // 删除
      var tf = confirm('是否删除？')
      if (tf) {
        var id = event.target.getAttribute('id')
        dropNto(id, this)
      }
    },
    jx () {
      this.tag = '简讯'
      this.please('简讯')
    },
    gg () {
      this.tag = '公告'
      this.please('公告')
    },
    bs () {
      this.tag = '比赛'
      this.please('比赛')
    },
    hy () {
      this.tag = '会议'
      this.please('会议')
    },
    please (name) {
      var data = new FormData()
      data.set('page', 0)
      data.set('size', 8)
      data.set('bulletionTypeName', name)
      gg(data, this)
    }
  },
  mounted () {
    this.tag = '公告'
    this.please('公告')
  }
}
</script>

<style lang="stylus" scoped>
  .article_box{
    float: left
    margin-top: 50px
    background-color: green
    width: calc(100% - 254px)
    height: 700px
    ul{
      padding: 0
      margin: 0
      width: 100%
      height: 30px
      display: flex
      flex-direction: row
      list-style: none
      li{
        cursor: pointer
        margin-left: .3rem
      }
    }
    .input{
      margin-left: .3rem
    }
    .content{
      padding: 0
      width: 100%
      margin-top: .5rem
      display: flex
      flex-direction: column
      height: 100%
      list-style: none
      li{
        width: 100%
        height: 60px
        span{
          margin-left: .4rem
        }
      }
    }
  }
</style>
